<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Slatebox.js Sample</title>
    <link rel='stylesheet' type='text/css' href='css/simple.css' media='screen' />
    <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/slatebox.min.js"></script>
    <script>
        (function ($, $s) {
            $(document).ready(function () {
                var log = [], startTime = Math.round(new Date().getTime() / 1000);

                function upd() {
                    Slatebox.el("txtSlateJson").value = _mainSlate.exportJSON();
                    Slatebox.el("txtSlateLastUpdated").innerHTML = "last updated <b>" + new Date().toString();
                };

                var _mainSlate = $s.slate({
                    id: 'firstSlateExample' //slate with the same ids can collaborate together.
                    , container: 'slate'
                    , viewPort: { width: 50000, height: 50000, allowDrag: true, left: 5000, top: 5000 }
                    , showZoom: true
                    , showBirdsEye: false
                    , showStatus: false
                    , showMultiSelect: false
                    , onSlateChanged: function (subscriberCount) {
                        upd();
                    }
                    , collaboration: {
                        allow: true
                        , showPanel: false
                        , url: 'http://slatebox.com'
                        , jsonp: true
                        , userName: "Tester"
                        , userIP: 1
                        , userProfile: ''
                        , callbacks: {
                            onCollaboration: function (name, msg) {
                                var secs = Math.round(new Date().getTime() / 1000) - startTime;
                                log.push(secs + " secs ago - " + name + ": " + msg.toLowerCase());
                                Slatebox.el("slateMessage").innerHTML = log.reverse().join('<br/>');
                                startTime = Math.round(new Date().getTime() / 1000);
                                upd();
                            }

                        }
                    }
                }).canvas.init({ imageFolder: "http://static.slatebox.com/cursors/" });
                var _nodes = [
                    $s.node({ id: 'first_node', text: 'drag', xPos: 5090, yPos: 5120, height: 40, width: 80, vectorPath: 'roundedrectangle', backgroundColor: '90-#ADD8C7-#59a989', lineColor: "red", lineWidth: 2, allowDrag: true, allowMenu: true, allowContext: true })
                    , $s.node({ id: 'second_node', text: 'me', xPos: 5290, yPos: 5080, height: 40, width: 100, vectorPath: 'ellipse', backgroundColor: '90-#2A8FBD-#14709a', lineColor: "red", lineWidth: 4, allowDrag: true, allowMenu: true, allowContext: true })
                    , $s.node({ id: 'third_node', text: 'around', xPos: 5260, yPos: 5305, height: 40, width: 80, vectorPath: 'rectangle', backgroundColor: '90-#556270-#7b92ab', lineColor: "white", lineWidth: 5, allowDrag: true, allowMenu: true, allowContext: true })
                ];
                _mainSlate.nodes.addRange(_nodes);
                _nodes[1].relationships.addParent(_nodes[0], {});
                _nodes[2].relationships.addAssociation(_nodes[0], {});
                _nodes[2].relationships.addAssociation(_nodes[1], {});
                _mainSlate.init();
            });
        })(jQuery, new Slatebox());
    </script>
</head>
<body>
    <h2>
        Simple Slatebox.js Demo</h2>
    <p>
        Open this page up in multiple browsers to see real-time collaboration in action</p>

    <div id="slateContainer">
        <div id="slate">
        </div>
        <div id="slateJson">
            <p>
                Current JSON (can be used to save slate to a user's account at Slatebox.com)</p>
            <textarea id='txtSlateJson'></textarea>
            <div id="txtSlateLastUpdated">
            </div>
        </div>
    </div>
    <div id="slateMessage">
    </div>

     <script type="text/javascript">
         var _gaq = _gaq || [];
         _gaq.push(['_setAccount', 'UA-3128526-2']);
         _gaq.push(['_setDomainName', 'slatebox.com']);
         _gaq.push(['_trackPageview']);

         (function () {
             var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
             ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
             var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
         })();
    </script>
</body>
</html>
